<template>
  <div class="slider-content">
    <div v-if="!hideSlider" :class="['slider', { show: showMenu }]">
      <div class="title-bar">
        <slot name="slider-title">
          {{ sliderTitle }}
        </slot>
        <a
          class="toggle-menu"
          href="javascript:;"
          @click="showMenu = !showMenu"
        >
          <CloseOutlined />
        </a>
      </div>
      <div class="wrap">
        <slot name="slider"></slot>
      </div>
    </div>
    <div class="content">
      <div class="title-bar">
        <slot name="content-nav">
          {{ $t("YourLocation") }}： {{ contentNav }}
        </slot>

        <a
          class="toggle-menu"
          href="javascript:;"
          @click="showMenu = !showMenu"
        >
          <MenuOutlined />
        </a>
      </div>
      <div class="wrap">
        <slot name="content"></slot>
      </div>
    </div>
  </div>
</template>

<script setup>
import { MenuOutlined, CloseOutlined } from "@ant-design/icons-vue";
import { ref } from "vue";
defineProps(["sliderTitle", "content-nav", "hideSlider"]);
const showMenu = ref(false);
</script>

<style lang="less">
.slider-content {
  display: flex;
  background-color: #fff;
  // prettier-ignore
  border: 1PX solid rgba(0, 0, 0, 0.25);
  overflow: hidden;
  position: relative;

  .slider {
    width: 27%;
    min-width: 27%;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    .wrap {
      padding: 6px 0;
      flex: 1;
      // prettier-ignore
      border-right: 1PX solid rgba(0, 0, 0, 0.25);
    }
  }

  .content {
    flex: 1;
    width: 0;
    .wrap {
      padding: 15px;
    }
  }

  .title-bar {
    background: #000000;
    color: #fff;
    padding: 6px 8px;
    font-size: 8px;
    position: relative;
  }
}

.toggle-menu {
  position: absolute;
  right: 0;
  top: 0;
  display: block;
  padding: 6px;
  color: #fff;
  display: none;
}

@media screen and (max-width: 768px) {
  .toggle-menu {
    display: block;
  }
  .slider-content .slider {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    height: 100%;
    width: 100%;
    transition: all 0.2s;
    transform: translateX(-100%);

    &.show {
      transform: translateX(0%);
    }
  }
}
</style>
